<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id="app" style="background-color: aquamarine">
  <ul>
    <li v-for="(item,index) in players" v-bind:key="item.id">
      数组下标：{{index}} --- id：{{item.id}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}
    </li>
  </ul>

  <ul>
    <li v-for="(val, key, i) in bestplayer">
      {{val}} --- {{key}} --- {{i}}
    </li>
  </ul>

  <h3 v-for="i in 10">这是第 {{i}} 个h3标签</h3>


  <label>添加新球员
    <input type="text" v-model.lazy="newPlayerName" @keyup.enter="addPlayer">
  </label>
  <ul>
    <li v-for="item in players" v-bind:key="item.id">
      <input type="checkbox"> id：{{item.id}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}
    </li>
  </ul>

  <label>
    <input type="text" v-model="playerQueryParam">
  </label>

  <ul>
    <div v-for="item in players" :key="item.id">
      <li v-if="filterMethod(item)">
        id：{{item.id}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}
      </li>
    </div>
  </ul>

</div>


<script>
  new Vue({ //初始化一个VUE实例
    el: '#app',     // 用于页面渲染VUE实例的元素
    data: { // 定义数据
      players:[
        {id:1,name:"curry",age:11},
        {id:2,name:"durant",age:22},
        {id:3,name:"james",age:33},
      ],
      bestplayer:{name:"乔丹",age:48},
      newPlayerName:"",
      playerQueryParam:""
    },
    methods:{
      addPlayer(){
        this.players.unshift({id:4,name:this.newPlayerName,age:null});
      },
      filterMethod(item){
        return  item.name.includes(this.playerQueryParam);
      }
    }
  })
</script>


</body>
</html>